<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>网站后台管理模版</title>
		<link type="text/css" rel="stylesheet" th:href="@{/layui/css/layui.css}">
		<link th:href="@{/lib/font-awesome/css/font-awesome.css}" rel="stylesheet" />
		<link th:href="@{/lib/bootstraps/css/bootstrap.css}" rel="stylesheet" />
		<link th:href="@{/lib/bootstraps/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet" />
		<link th:href="@{/lib/jsTree/css/style.min.css}" rel="stylesheet" />
		<link th:href="@{/lib/jqTreeGrid/css/jquery.treegrid.css}" rel="stylesheet" />
		<style>
			input.error {
				border: 1px solid red;
				color: red;
			}
			label.error {
				display: block;
				margin-top: 8px;
				margin-left: 2px;
				color: red;
			}
		</style>
	</head>

	<body>
	<blockquote class="demoTable layui-elem-quote" style="padding:10px 10px;border:0px">
		<div class="layui-inline">
			<button class="layui-btn layui-btn-sm" onclick="addDept()">新增部门</button>
		</div>
	</blockquote>

	<table id="deptTable" data-mobile-responsive="true"></table>

	<div class="modal fade" id="addDept" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width:50%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">新增部门</h4>
				</div>
				<form  class="form-horizontal" action="/addDept" method="post" id="addDeptForm" style="margin-top:10px">
					<input id="id" name="id" type="hidden" value="0">
					<input id="parentId" name="parentId" type="hidden" value="0">

					<div class="form-group">
						<label  class="col-sm-3 control-label">上级部门:</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" id="pdeptName" readonly="readonly" value=""/>
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-3 control-label">部门名称:</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" id="deptName" name="deptName" placeholder="请填写部门名称" value=""/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">英文名称:</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" id="deptNameE" name="deptNameE" placeholder="请填写英文名称" value=""/>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">机构等级:</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" id="deptType" name="deptType" placeholder="请填写机构等级" value=""/>
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-3 control-label">状态:</label>
						<div class="col-sm-8">
							<label class="radio-inline">
								<input type="radio" name="status" id="status1" value="0" checked> 启用
							</label>
							<label class="radio-inline">
								<input type="radio" name="status" id="status2"  value="9"> 未启用
							</label>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default"  data-dismiss="modal">关闭</button>
						<button class="btn btn-primary" type="submit">提交 </button>
					</div>
				</form>
			</div>
		</div>
	</div>

	<script th:src="@{/js/jquery-3.2.1.min.js}" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" th:src="@{/lib/bootstraps/js/bootstrap.js}"></script>
	<script type="text/javascript" th:src="@{/lib/bootstraps/js/bootstrap-table/bootstrap-table.min.js}"></script>
	<script type="text/javascript" th:src="@{/lib/bootstraps/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
	<script type="text/javascript" th:src="@{/lib/jqTreeGrid/js/jquery.treegrid.min.js}"></script>
	<script type="text/javascript" th:src="@{/lib/jqTreeGrid/js/jquery.treegrid.bootstrap3.js}"></script>
	<script type="text/javascript" th:src="@{/lib/jqTreeGrid/js/jquery.treegrid.extension.js}"></script>
	<script type="text/javascript" th:src="@{/lib/jsTree/js/jstree.min.js}"></script>

	<script type="text/javascript" th:src="@{/lib/valids/jquery.validate.min.js}"></script>
	<script type="text/javascript" th:src="@{/lib/valids/additional-methods.js}"></script>
	<script th:src="@{/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/js/dept/dept.js}" type="text/javascript" charset="utf-8"></script>
	<script>
        layui.use(['layer'], function() {
            var layer = layui.layer
        });

	</script>

	</body>

</html>